<script setup lang="ts">
import {listType} from "@/views/ai/agent/x6/content-renderer";
import {Thinking, Typewriter} from "vue-element-plus-x";

const props = defineProps({
  item:{
    type:Object as PropType<listType>,
    required:true
  }
});
const ocr=computed(()=>{
  return  props.item.chunk?.filter(c=>c.node==='MULTIMODAL'&&c.status=='progressing').map(c=>c.content).join('')
})
const loading=computed(()=>{
  const endNode=props.item.chunk?.filter(c=>c.node==='MULTIMODAL'&&c.status=='completed').length||0
  const startNode=props.item.chunk?.filter(c=>c.node==='MULTIMODAL'&&c.status=='start').length||0
  return endNode==startNode?'end':'thinking'
})
</script>

<template>
  <div>
    <thinking auto-collapse v-if="ocr&&ocr.length>0" :status="loading" :content="ocr||''">
      <template #content="{ content }">
        <div class="content-div">
          <Typewriter is-markdown :content="content" />
        </div>
      </template>
    </thinking>
  </div>
</template>

<style scoped lang="scss">
.content-div{
  width: var(--bubble-content-max-width);
  max-width: var(--bubble-content-max-width);
}
</style>
